<template>
  <!-- 导航 -->
  <div class="header-container">
    <div class="container">
      <el-menu
          :default-active="activeIndex"
          class="top-header"
          mode="horizontal"
          background-color="#fff"
          text-color="#303133"
          active-text-color="#303133"
      >
        <h1 class="logo_link">
          <img src="../images/logo.png" style="width: 60px" alt=""/>
        </h1>
        <div class="top-nav-content">
          <div class="nav-primary-container">
            <router-link to="/"
            >
              <el-menu-item class="left" index="1"
              >首页
              </el-menu-item
              >
            </router-link
            >
            <router-link to="/report"
            >
              <el-menu-item class="left" index="2"
              >举报
              </el-menu-item
              >
            </router-link
            >
            <router-link to="/track"
            >
              <el-menu-item class="left" index="3"
              >历史举报
              </el-menu-item
              >
            </router-link
            >
          </div>
          <div class="header-search">
            <li class="el-menu-item" role="menuitem">
              <el-select
                  @focus="getCity"
                  @change="toDetailCity"
                  v-model="cityId"
                  placeholder="请选择城市"
                  filterable
              >
                <el-option
                    v-for="item in cityList"
                    :key="item.id"
                    :label="item.city"
                    :value="item.id"
                >
                </el-option>
              </el-select>
            </li>
          </div>
        </div>
        <div class="header-right">
          <el-menu-item
              class="right"
              index="4"
              @click="login()"
              v-if="!userName.userId"
          >登录
          </el-menu-item
          >
          <el-submenu index="5" v-else>
            <template slot="title" >{{ userName.userName }} &nbsp;&nbsp;&nbsp;</template>
            <el-menu-item index="5-1" @click="toUserInfo()">个人信息</el-menu-item>
            <el-menu-item index="5-2" @click="logout()">登出</el-menu-item>
          </el-submenu>
        </div>
      </el-menu>
    </div>

  </div>
</template>

<script>
import {mapState} from "vuex";

export default {
  name: "TypeNav",
  data() {
    return {
      activeIndex: "1",

      // 查询参数
      cityId: null,

    };
  },
  mounted() {

  },
  methods: {
    //跳转个人详细信息
    toUserInfo(){
      this.$router.push("/userinfo/" + this.userName.userId);
    },
    //跳转详细城市
    async toDetailCity() {
      await this.$store.dispatch("detail/getIdCityList", this.cityId);
      this.$router.push("/detail/" + this.cityId);
    },

    //获取城市
    async getCity() {
      await this.$store.dispatch("detail/getCityList");
    },

    //登录
    login() {
      this.$router.push("/login")
    },

    //退出账号
    async logout() {
      //退出登录需要做的事情
      //1:需要发请求，通知服务器退出登录【清除一些数据：token】
      //2:清除项目当中的数据【userInfo、token】
      try {
        this.$confirm("确定注销并退出系统吗？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
            .then(async () => {
              await this.$store.dispatch("user/logout").then(() => {
                location.href = "/";
              });
            })
            .catch({});
        // 跳转到首页
      } catch (error) {
        console.log(error.message);
      }
    },
  },

  computed: {
    //用户信息
    ...mapState("user", {userName: "userInfo"}),

    // 城市列表
    ...mapState("detail", ["cityList"]),
  },
};
</script>

<style lang="less" scoped>
.header-container {
  background-color: #fff;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3000;

  .container {
    margin-right: auto;
    margin-left: auto;
    width: 1440px;

    .top-header {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      height: 68px;
      color: #414141;

      .top-nav-content {
        padding-right: 10px;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex: 1;

        .nav-primary-container {
          display: flex;
          justify-content: flex-start;
          align-items: center;
        }

        .header-search {
          width: 250px;
          display: block;
        }

        .header-right {
          i{
            position: static;
          }
        }
      }
    }
  }
}
</style>